<template>
	<view class="container">
		<view class="back"
			:style="{'top':menuButtonInfo.top+'px','height':menuButtonInfo.height+'px','width':menuButtonInfo.height+'px'}"
			@click="$backTo()">
			<u-icon name="arrow-left" size="40" color="#fff"></u-icon>
		</view>
		<view class="swiper_box">
			<u-swiper :list="goodsInfo.newimages" height="750" mode="center" border-radius="0"
				@click="swiperClick"></u-swiper>
		</view>
		<view class="guige">
			<view class="infos">
				<view class="price">
					<view class="big"><text>￥</text>{{goodsInfo.price}}</view>
					<view class="small"><text>￥</text>{{goodsInfo.ot_price}}</view>
				</view>
				<view class="sku">
					<view>库存：{{goodsInfo.stock}}</view>|
					<view>已售：{{goodsInfo.sales}}</view>
				</view>
			</view>
			<view class="goods_title">{{goodsInfo.store_name}} {{skuValue[skuCurrent].num}}瓶</view>
			<!-- <view class="miaosu">{{goodsInfo.description}}</view> -->
			<scroll-view scroll-x="true" style="margin-top: 20rpx;">
				<view class="guigebox">
					<view class="list" v-for="(item,index) in skuValue" :key="index"
						:class="skuCurrent==index?'active':''" @click="skuClick(item,index)">
						<image :src="item.image||goodsInfo.newimages[0]" mode=""></image>
						<view class="text" style="background: #fff !important;font-size: 24rpx;font-weight: normal;">
							{{item.suk}}
						</view>
						<view class="text" style="font-size: 20rpx;height: 40rpx;font-weight: normal;">
							￥{{item.price}}/瓶</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="brand_info_box">
			<view class="list_boxsssss">
				<view class="list">
					<view class="tops">品牌</view>
					<view class="bottom_con">{{goodsInfo.store_brand||'无'}}</view>
				</view>
				<view class="list">
					<view class="tops">产地/产国</view>
					<view class="bottom_con">{{goodsInfo.store_origin||'无'}}</view>
				</view>
				<view class="list">
					<view class="tops">酒精度</view>
					<view class="bottom_con">{{goodsInfo.store_jjd||'无'}}</view>
				</view>
				<view class="list">
					<view class="tops">净含量</view>
					<view class="bottom_con">{{goodsInfo.store_jhl||'无'}}</view>
				</view>
			</view>
		</view>
		<view class="guige3">
			<view class="p">
				<view class="title">送至{{locations}}</view>
				<!-- <view>重庆粤北</view> -->
			</view>
			<view class="p">
				<view class="title">配送</view>
				<view>现在下单，预计（{{$dTime(timestamp,2)}}）可送达</view>
			</view>
		</view>
		<!-- 详情富文本 -->
		<view class="rich_box"><u-parse :html="goodsInfo.description"></u-parse></view>
		<view class="foot_btns">
			<view class="left_box">
				<view class="small_btn" @click="$gourl('/pages/index/index',2)">
					<view class="icon">
						<u-icon name="home"></u-icon>
					</view>
					<view>首页</view>
				</view>
				<button class="kfButton small_btn center" open-type="contact" bindcontact="handleContact"
					session-from="sessionFrom">
					<view class="icon">
						<u-icon name="server-fill"></u-icon>
					</view>
					<view>客服</view>
				</button>
				<view class="small_btn" @click="$gourl('/pages/index/shopCar',2)">
					<view class="icon"><u-icon name="shopping-cart"></u-icon></view>
					<view>购物车</view>
				</view>
			</view>
			<view class="big_btn">
				<view class="add_car" @click="addAbuyClick(1)">加入购物车</view>
				<view class="pay_mall" @click="addAbuyClick(2)">立即购买</view>
			</view>
		</view>
		<u-popup v-model="addCar" mode="bottom" border-radius="20" :closeable="true">
			<view class="con">
				<view class="top_img">
					<image :src="goodsDetails.content_banner[0].img" mode="widthFix"></image>
				</view>
				<view class="con_bg">
					<view class="mall_info">
						<image :src="selectSku.image||goodsInfo.newimages[0]" mode=""></image>
						<view class="infos">
							<view class="name" style="font-weight: bold;">
								{{goodsInfo.store_name}}{{skuValue[skuCurrent].suk}}
							</view>
							<view class="specs">库存：{{skuValue[skuCurrent].stock}}</view>
							<view class="price">
								<view class="big"><text>￥</text>{{selectSku.price}}</view>
								<view class="small"><text>￥</text>{{selectSku.ot_price}}</view>
							</view>
						</view>
					</view>
					<view class="sku_box">
						<view class="title">规格</view>
						<scroll-view scroll-x="true">
							<view class="guigebox">
								<view class="list" v-for="(item,index) in skuValue" :key="index"
									:class="skuCurrent==index?'active':''" @click="skuClick(item,index)">
									<image :src="item.image||goodsInfo.newimages[0]" mode=""></image>
									<view class="text"
										style="background: #fff !important;font-size: 24rpx;font-weight: normal;">
										{{item.suk}}
									</view>
									<view class="text" style="font-size: 20rpx;height: 40rpx;font-weight: normal;">
										￥{{item.price}}/瓶</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="sku_box">
						<view class="title">
							<view class="txt">冰冻</view>
							<view class="sku"><text style="margin-right: 10rpx;">共{{bdNumber + cwNumber}}瓶</text>|<text
									class="ice">冰冻{{bdNumber}}</text>常温{{cwNumber}}</view>
						</view>
						<view class="sku bing">
							<view class="list" v-for="(item,index) in skuValue[skuCurrent].wdInfo" :key="index"
								v-if="item !== '自定义冰冻数量'" :class="bdCurrent==index?'active':''"
								@click="bdClick(item,index)">
								{{item}}
							</view>
						</view>
						<view class="input_box list" :class="bdCurrent == 3 ? 'active' : ''"
							v-if="skuValue[skuCurrent].wdInfo.includes('自定义冰冻数量')||(skuValue[skuCurrent].wdInfo.length>1 && (bdNumber + cwNumber)>1)"
							@click="bdClick('自定义冰冻数量',3)">
							<view>自定义冰冻数量</view>
							<view style="flex: 1;display: flex;justify-content: space-between;padding-right: 20rpx;"
								v-if="bdCurrent == 3">
								<text style="font-weight: normal;margin-right: 20rpx;">全冰</text><u-slider
									v-model="bfNumber" setup="1" height="10" style="flex: 1;"
									@moving="sliderEnd"></u-slider> <text
									style="font-weight: normal;margin-left: 20rpx;">不冰</text>
							</view>
						</view>
					</view>
					<view class="number">
						购买数量
						<u-number-box v-model="buyNumber" @change="valChange"
							:min="skuValue[skuCurrent].buy_num"></u-number-box>
					</view>
					<view class="btns">
						<view class="add_cart" @click="addCarClick('0')">加入购物车</view>
						<view class="buy_btn" @click="addCarClick('1')">立即购买</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import QQMapWX from '@/libs/qqmap-wx-jssdk.min.js'
	export default {
		data() {
			return {
				addCar: false,
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(), //胶囊按钮信息
				addAbuy: 1,
				buyNumber: 1,
				skuCurrent: 0,
				baseUrl: this.$baseUrl,
				goodsId: '',
				goodsInfo: null,
				goodsInfo: {
					content: `<p> 露从今夜白， 月是故乡明 </p>
							<img src = "https://cdn.uviewui.com/uview/swiper/2.jpg"/>`
				},
				isLogin: false,
				isRenzheng: false,
				bdCurrent: 0,
				bdNumber: 0,
				cwNumber: 0,
				bfNumber: 0,
				skuArr: [],
				skuValue: [],
				selectSku: {},
				timestamp: '',
				selectWd: '全冰',
				qqmapsdk: '',
				locations: null,
				goodsDetails: null
			}
		},
		async onLoad(opdata) {
			this.goodsId = opdata.id
			this.timestamp = (new Date().getTime()) / 1000 + 1800;
			await this.getData()
			const loaction = await this.getLoaction()
			this.locations = loaction.address
		},
		onShow() {
			// if (uni.getStorageSync('userToken')) {
			// 	this.isLogin = true
			// 	this.getserInfo()
			// } else {
			// 	this.isLogin = false
			// 	this.userInfos = null
			// }
		},
		methods: {
			swiperClick(e) {
				console.log(e);
				uni.previewImage({
					urls: this.goodsInfo.newimages,
					loop: true,
					indicator: 'number',
					current: e,
					success: (res) => {
						console.log(res);
					}
				})
			},
			//获取位置信息
			async getLoaction() {
				return new Promise((resolve) => {
					//位置信息默认数据
					let location = {
						longitude: 0,
						latitude: 0,
						province: "",
						city: "",
						area: "",
						street: "",
						address: "",
					};
					uni.getLocation({
						type: "gcj02",
						success(res) {
							location.longitude = res.longitude;
							location.latitude = res.latitude;
							// 腾讯地图Api
							const qqmapsdk = new QQMapWX({
								key: 'NBDBZ-IXZ6C-QXO2M-AIGGU-4XAOO-F5FUZ' //这里填写自己申请的key
							});
							qqmapsdk.reverseGeocoder({
								location,
								success(response) {
									let info = response.result;
									console.log(info);
									location.province = info.address_component.province;
									location.city = info.address_component.city;
									location.area = info.address_component.district;
									location.street = info.address_component.street;
									location.address = info.address;
									resolve(location);
								},
								fail: errorres => {
									location.address = errorres.message
									resolve(location);
								}
							});
						},
						fail(err) {
							console.log(err)
							resolve(location);
						},
					});
				});
			},

			bdClick(item, index) {
				this.bdCurrent = index
				this.selectWd = item
				this.valChange()
			},
			valChange() {
				if (this.selectWd == '全冰') {
					this.bdNumber = this.buyNumber * this.selectSku.num
					this.cwNumber = 0
				} else if (this.selectWd == '一半冰' || this.selectWd == '一半冰一半不冰') {
					this.bdNumber = Math.ceil(this.buyNumber * this.selectSku.num / 2)
					this.cwNumber = this.buyNumber * this.selectSku.num - this.bdNumber
				} else if (this.selectWd == '常温') {
					this.bdNumber = 0
					this.cwNumber = this.buyNumber * this.selectSku.num
				} else if (this.selectWd == '自定义冰冻数量') {
					this.sliderEnd()
				}
			},
			sliderEnd() {
				let cs = this.bfNumber / 100
				this.cwNumber = Math.ceil(this.buyNumber * this.selectSku.num * cs)
				this.bdNumber = this.buyNumber * this.selectSku.num - this.cwNumber
			},
			skuClick(item, index) {
				this.selectSku = item
				this.skuCurrent = index
				this.bdCurrent = 0
				this.bfNumber = 0
				this.buyNumber = this.skuValue[index].buy_num
				this.selectWd = this.skuValue[index].wdInfo[0]
				this.valChange()
			},
			addCarClick(type) {
				this.$allApi.addCar({
					productId: this.selectSku.product_id,
					cartNum: this.buyNumber,
					uniqueId: this.selectSku.unique,
					bd_value: JSON.stringify({
						bd: this.bdNumber,
						cw: this.cwNumber,
						type: this.selectWd,
						bfNumber: this.bfNumber / 100
					}),
					new: type
				}).then(res => {
					this.addCar = false
					this.bdNumber = 0
					this.cwNumber = 0
					this.bdCurrent = 0
					this.buyNumber = 1
					this.bfNumber = 0
					this.bdCurrent = 0
					if (type == '0') {
						this.$u.toast('添加成功')
					} else {
						this.$gourl(`/mallPage/confirmOrder?car_id=${res.data.cartId}`)
					}
				})
			},
			getserInfo() {
				this.$allApi.getUserInfo().then(res => {
					if (res.data.user.type_title.length > 0) {
						this.isRenzheng = true
					}
				})
			},
			cancelCollect() {
				this.$allApi.cancelCollect(this.goodsInfo.id).then(res => {
					this.getData()
				})
			},
			addCollect() {
				this.$allApi.addCollect({
					spec_id: this.goodsInfo.id
				}).then(res => {
					this.getData()
				})
			},
			cancelQingdan() {
				this.$allApi.cancelQingdan({
					id: this.goodsInfo.id
				}).then(res => {
					this.getData()
				})
			},
			addQingdan() {
				this.$allApi.addQingdan({
					product_id: this.goodsInfo.id
				}).then(res => {
					this.getData()
				})
			},
			getData() {
				this.$allApi.getGoodsDetail({
					id: this.goodsId
				}).then(res => {
					this.goodsDetails = res.data
					this.skuArr = res.data.productAttr
					for (let item in res.data.productValue) {
						this.skuValue.push(res.data.productValue[item])
					}
					for (let item of this.skuValue) {
						item.wdInfo = []
						item.wdInfo = item.wd_value.split(',')
					}
					this.selectSku = this.skuValue[0]
					this.buyNumber = this.skuValue[0].buy_num
					this.goodsInfo = res.data.storeInfo
					this.goodsInfo.description = this.goodsInfo.description.replace(/<img/g,
						"<img style='width:100%;height:auto;'")
					this.selectWd = this.selectSku.wdInfo[0]
					this.valChange()
					let newimages = []
					this.goodsInfo.newimages = res.data.storeInfo.slider_image
				})
			},
			addAbuyClick(index) {
				// if (!this.isLogin) {
				// 	this.$gourl('/minePage/attestation')
				// 	return
				// } else if (this.isLogin && !this.isRenzheng) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '完成认证之后才能购买商品，是否前往认证',
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: '/minePage/attestation',
				// 					animationType: 'slide-in-right',
				// 					animationDuration: 300
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}
				// 		}
				// 	});
				// 	return
				// } else {
				// 	this.addCar = true
				// 	this.addAbuy = index
				// }
				this.addCar = true
				this.addAbuy = index
			},

		}
	}
</script>
<style>
	.u-drawer-bottom {
		background: none !important;
	}
</style>
<style scoped lang="scss">
	.brand_info_box {

		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.list_boxsssss {
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			background: #fff7f9;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 24rpx;

			.list {
				flex: 1;
				border-right: 1px dashed #ffdfe1;

				.tops {
					color: #999;
					font-size: 20rpx;
				}
			}

			.list:last-child {
				border-right: none;
			}
		}
	}

	.active {
		background: rgba(234, 61, 55, 0.08);
		border: 2rpx solid #DB3E3F !important;
		color: #DB3E3F;
		font-weight: bold;

		view {
			color: #DB3E3F;
			background: rgba(234, 61, 55, 0.08);
		}
	}

	.guigebox {

		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 242rpx;
		/* 添加以下样式，禁止父级元素拦截触摸事件 */
		-webkit-overflow-scrolling: touch;


		.list {
			margin: 10rpx;
			width: 142rpx;
			border-radius: 12rpx;
			background: #fff;
			border: 2rpx solid #fff;
			flex-shrink: 0;

			image {
				width: 138rpx;
				height: 138rpx;
				border-radius: 12rpx 12rpx 0 0;
				display: inline-block;
			}

			.text {
				background: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				text-overflow: ellipsis;
				border-radius: 0 0 12rpx 12rpx;
				padding: 0 8rpx;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

	.back {
		position: fixed;
		background: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		top: 100px;
		left: 20rpx;
		z-index: 50;
	}

	.shoucang_box {
		display: flex;
		// align-items: center;
		justify-content: space-between;
	}

	.con {

		.top_img {
			display: flex;
			align-items: center;
			justify-content: center;
			// background: #fff;
			padding: 20rpx 0;
			// margin-bottom: 30rpx;
		}

		.con_bg {
			background: #F6F6F6;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 45rpx;
			overflow: hidden;

			view {
				flex: 1;
				height: 90rpx;
				background: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}

			.buy_btn {
				background: #DB3E3F;
			}
		}

		.number {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			border-top: 1px solid #f3f3f3;
			background: #fff;
			margin: 20rpx 0;
		}

		.sku_box {
			margin-top: 12rpx;
			padding: 0 20rpx;
			background: #fff;
			margin-top: 20rpx;
			padding: 20rpx;

			.input_box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border: 1px solid #f6f6f6;
				border-radius: 10rpx;

				view {
					width: 236rpx;
					height: 60rpx;
					border-radius: 10rpx;
					background: #F6F6F6;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				input {
					flex: 1;
					padding-left: 20rpx;
				}
			}

			.title {
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;

				.sku {
					font-weight: normal;

					.ice {
						color: #26ACF5;
						margin: 0 10rpx;
					}
				}
			}

			.sku {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;

				.list {
					min-width: 170rpx;
					border-radius: 10rpx;
					background: #F6F6F6;
					margin: 20rpx;
				}
			}



			.bing {
				justify-content: space-between;

				.list {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					padding: 20rpx 36rpx;
					margin: 0;
					margin-bottom: 20rpx;
				}
			}


		}

		.mall_info {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			padding-top: 40rpx;
			background: #fff;

			.infos {
				flex: 1;
				padding-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.specs {
					color: #999;
					font-size: 24rpx;
				}

				.price {
					display: flex;
					align-items: flex-end;
					justify-content: flex-start;

					.big {
						font-size: 40rpx;
						color: #EA3D37;

						text {
							font-size: 24rpx;
						}
					}

					.small {
						font-size: 24rpx;
						color: #999999;
						text-decoration: line-through;

						text {
							font-size: 18rpx;
						}
					}
				}

				.sku_num {
					font-size: 24rpx;
					color: #999;
				}
			}

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}
	}

	.foot_btns {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: calc(constant(safe-area-inset-bottom) + 140rpx);
		height: calc(env(safe-area-inset-bottom) + 140rpx);
		z-index: 99;
		background: #fff;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-top: 20rpx;

		.big_btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50rpx;
			overflow: hidden;

			.pay_mall {
				background: #DB3E3F;
			}

			view {
				flex: 1;
				background: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				height: 100rpx;

			}
		}

		.left_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.small_btn {
				width: 120rpx;
				text-align: center;
				font-size: 24rpx;

				.icon {
					font-size: 30rpx;
				}
			}



			.kfButton {
				background: none !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
				font-size: 20rpx !important;
				margin: 0 !important;
				line-height: normal !important;
				border-radius: 0 !important;
			}

			button::after {
				border-radius: 0;
				border: 0;
			}

			.center {
				border-left: 1px solid #e0e0e0;
				border-right: 1px solid #e0e0e0;
			}
		}
	}

	.rich_box {
		margin-top: 20rpx;
		padding: 20rpx;
		background: #fff;

		/deep/ img {
			display: block;
		}
	}

	.guige3 {
		width: 750rpx;
		height: 132rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 20rpx;

		.p {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 24rpx;
			color: #999;

			.title {
				font-size: 28rpx;
				color: #333;
				margin-right: 10rpx;
			}
		}
	}

	.guige2 {
		width: 750rpx;
		height: 132rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-between;
		padding: 20rpx;
		text-align: center;

		.center {
			width: 33.33333%;
			border-left: 1px solid #e0e0e0;
			border-right: 1px solid #e0e0e0;
		}

		.big {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
		}

		.small {
			width: 100%;
			font-size: 20rpx;
		}

	}

	.guige {
		width: 750rpx;
		background: #FFFFFF;
		padding: 20rpx;

		.miaosu {
			font-size: 24rpx;
			color: #666666;
			width: 740rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.goods_title {
			width: 740rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 32rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.infos {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				display: flex;
				align-items: flex-end;
				justify-content: flex-start;

				.big {
					font-size: 40rpx;
					color: #EA3D37;

					text {
						font-size: 24rpx;
					}
				}

				.small {
					font-size: 24rpx;
					color: #999999;
					text-decoration: line-through;

					text {
						font-size: 18rpx;
					}
				}
			}

			.sku {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #999;

				.list {
					padding: 20rpx;
					margin: 20rpx;
				}
			}
		}


	}

	.container {
		background: #f8f8f8;
		padding-bottom: calc(170rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
	}
</style>